{% load i18n %}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="user-scalable=no,width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
    <meta name="HandheldFriendly" content="true">
    <link rel="shortcut icon" href="/favicon.ico">
    <!--添加开始  -->
    <meta name="renderer" content="webkit">
    <link rel="apple-touch-icon" href="/resources/img/binance_icon.png">
    <!--添加结束-->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link href="/static/app/css/sm.css" rel="stylesheet" type="text/css">
    <link href="/static/app/css/common.css" rel="stylesheet" type="text/css">
    <link href="/static/app/css/index.css" rel="stylesheet" type="text/css">
    <script src="/static/app/js/jquery-2.2.3.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script src="/static/app/js/layer/layer.js"></script>
    <script src="/static/app/js/clipboard.min.js"></script>
    <!-- 将canvas图片保存成图片 -->
    <script src="/static/app/js/canvas2image.js"></script>
    <script src="/static/app/js/base64.js"></script>
    <script>var page = 'assets';</script>
    <!-- add for app -->
    <script src="/static/app/js/common/common_func.js"></script>
    <script src="/static/app/js/component.js"></script> {% include 'show/common_define.html' %}
    <script type="text/javascript" src="{%url 'javascript-catalog' 'btc.js'%}"></script>
    <script src="/static/lib/csrf.js"></script>
    <title>{% trans '充值' %}</title>
    <!-- add for app end -->
</head>

<body>
    <div id="market-app" class="page-container">
        <div class="page-content">
            <div class="page-view">
                <div class="deposit-details">
                    <div class="content" id="products">
                        <div class="top_header">
                            <img src="/static//app//images/arrow_left.png" onclick="history.go(-1)" style="margin-left: 0.5rem; float: left; width: 16px; height: 26px"
                                alt="">
                            <h4 style="text-align: center">充值
                                <span @click="to_history(CoinDetail.coin_type)" style="float: right; margin-right: 0.5rem; color: #828a98; font-size: 18px; font-weight: normal">历史记录</span>
                            </h4>
                        </div>
                        <div class="chooseSymbol" style="margin-top: 0.5rem" v-on:click="openview()">
                            <img class="symbol-pic" :src="CoinDetail.img" />
                            <p class="symbol-asset">
                                {!CoinDetail.name_upper!}
                                <img class="rowright" src="/static/app/images/rowright.png">
                            </p>
                        </div>
                        <div class="deposit-address">
                            <div class="b-address">
                                <p class="label-address">BNB 充值地址</p>
                                <p class="asset-address" id="address">{!depositAddress!}</p>
                            </div>
                            <ul class="b-address-option">
                                <li class="copybtn" @click="copy()">
                                    <i class="font font-copy"></i>
                                    <p>复制地址</p>
                                </li>
                                <li class="QRcodebtn" @click="openQRcode()">
                                    <i class="font font-ewm"></i>
                                    <p>显示二维码</p>
                                </li>
                            </ul>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <div class="app_menu">
            <my-menu></my-menu>
        </div>
    </div>
    <script id="testbox" type="text/html">
<div  id="dataList">
	<div  class="search">
		<img src="/static/app/images/bigmirror.png"/>
		<input placeholder="搜索" style="caret-color: #F0B90B;"/>
		<span onclick="layer.closeAll();">取消</span>
	</div>
	<ul class="allsymbols">
		<li v-for="item in actData" v-on:click="select_coin(item.coin_type)">
			<p>
				<img :src="item.img"/>
				{!item.name_upper!}
				<span>({!item.full_name!})</span>
			</p>
		</li>
	</ul>
	</div>
</script>

    <script id="QRcode" type="text/html">
	<div class="QRcode">
		<i class="font font-close close-popup" onclick="layer.closeAll();"></i>
		<p class="QRcodeadd">BNB 充值地址</p>
		<div class="QRcode-content">
			<div class="QRcode-img">
                <!-- <canvas id="cvs" width="200" height="200"></canvas> -->
                <img id="depositImg" width="200" height="200" src="" />
			</div>
            <p id="a1" class="address2">0x0ff2f3e2290d3a0149d5f4fffabc4d93e14458e9</p>

			<div class="row">
				<div class="col-100" style="margin-top: 0.5rem; background: #dcab37">
					<span style="color: #fff !important" class="button button-fill button-big copy-btn2 r-copy" onclick="copy2()">复制地址</span>
				</div>
				<!-- <div class="col-100" style="margin-top: 0.5rem">
					<a class="button button-fill button-big" id="Download" onclick="downQRcode()">保存二维码</a>
				</div> -->
			</div>
		</div>
	</div>
</script>
    <script src="/static/app/js/deposit.js"></script>
    <script>
        function mytest() {
            vue.$data.aa = 33;
        }
        // function drawQRcode(){
        // 	var canvas=document.getElementById("cvs");
        // 	var image=new Image();
        // 	image.src="";
        // 	image.onload=function(){
        // 	canvas.getContext("2d").drawImage(this, 0, 0,200,200);
        // 	};

        // 	//alert('33');
        // }
        $(function () {
            // drawQRcode();
        })

        function copy2() {
            var clipboard2 = new ClipboardJS('.copy-btn2', {
                target: function (trigger) {
                    //return trigger.nextElementSibling;
                    return document.querySelector('.address2');
                }
            });
            //console.log(clipboard);
            clipboard2.on('success', function (e) {
                e.clearSelection();
                layer.open({
                    type: 0,
                    content: '成功',
                    className: 'cgong',
                    skin: 'msg',
                    style: 'border:none; background-color:#fff; color:#333;width:115px;border-radius:0px',
                    time: 2 //2秒后自动关闭
                });
            });

        }

    </script>
    <script>

        function downQRcode() {
            var oCanvas = document.getElementById("cvs");
            /*自动保存为png*/
            // 获取图片资源
            var img_data1 = Canvas2Image.saveAsPNG(oCanvas, true).getAttribute('src');
            saveFile(img_data1, 'qrcode.png');
        }
        // 保存文件函数
        var saveFile = function (data, filename) {
            var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
            save_link.href = data;
            save_link.download = filename;

            var event = document.createEvent('MouseEvents');
            event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
            save_link.dispatchEvent(event);
        };
    </script>
</body>

</html>